<template>
  <div class="panel-wrapper">
    <Input
      v-model="searchWord"
      @on-enter="handleSearch"
      prefix="ios-search"
      placeholder="搜索节点、插件、工作流"
    />
    <div class="panel-node-list">
      <div class="panel-node-item" v-for="(item, i) in filterList" :key="i">
        <div class="title" v-if="item.type">{{ item.type }}</div>
        <div class="node-item-list">
          <div
            class="node-item"
            v-for="node in item.nodes"
            :key="node.type"
            @click="handleNodeClick(node)"
          >
            <img :src="node.icon" class="node-item-icon" alt="icon" />
            <div class="node-item-name">{{ node.label }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <Modal v-model="showAddFlow" title="添加工作流">
    <div class="overflow-auto" style="height: 50vh">
      <div
        class="flex items-center justify-between w-full pb-2 mb-2 border-b border-solid cursor-pointer border-slate-200"
        v-for="item in flowList"
        :key="item.id"
      >
        <div class="flex items-center flex-1 ml-3">
          <img
            class="w-8 h-8 mr-2 rounded"
            src="~@/assets/images/icon_workflow.png"
            alt="database default"
          />
          <div class="flex-1">
            <p class="font-bold">{{ item.name }} <Icon type="ios-checkmark-circle" color="#19be6b" size="14" />
            <span class="ml-1 font-normal">已发布</span></p>
            <p class="mt-1 text-xs text-slate-500">
              {{ item.description || item.versiondesc }}
            </p>
            <p
                class="mt-1 text-xs text-slate-400"
                v-if="item.updatetime || item.createtime"
              >
                发布于{{
                  formatToDateTime(item.updatetime || item.createtime)
                }}
              </p>
          </div>
        </div>
        <Button size="small" @click="onFlowSelect(item)">添加</Button>
      </div>
    </div>
  </Modal>
  <Modal v-model="showAddPlugin" title="添加插件">
    <div class="overflow-auto" style="height: 50vh">
      <div
        class="flex items-center justify-between w-full pb-2 mb-2 border-b border-solid cursor-pointer border-slate-200"
        v-for="item in pluginList"
        :key="item.id"
      >
        <div class="flex items-center flex-1 ml-3">
          <img
            class="w-8 h-8 mr-2 rounded"
            src="~@/assets/images/icon_plugin.png"
            alt="database default"
          />
          <div class="flex-1">
            <p class="font-bold">{{ item.name }}</p>
            <p class="mt-1 text-xs text-slate-500">
              {{ item.description }}
            </p>
            <p
                class="mt-1 text-xs text-slate-400"
                v-if="item.releasedate"
              >
                发布于{{
                  formatToDateTime(item.releasedate)
                }}
              </p>
          </div>
        </div>
        <Button size="small" @click="onPluginSelect(item)">添加</Button>
      </div>
    </div>
  </Modal>
</template>
<script setup>
import { ref } from 'vue';
import { flowStore } from '@/store/flow';
import { listPublishFlow, listUseablePlugin, listPlugin } from '@/api/modules/flow';
import { formatToDateTime } from '@/util/dateUtil';

import { filterTree } from '@/util/index.js';
import { DEFAULT_NODE_LIST } from '../lib/config';

const emit = defineEmits(['node-click', 'hide']);
const { nodeObj } = flowStore();

const filterList = ref({ ...DEFAULT_NODE_LIST });
const searchWord = ref('');
const showAddFlow = ref(false);
const showAddPlugin = ref(false);

const flowList = ref([]);
const getFlowList = async () => {
  const { data } = await listPublishFlow({ data: {} });
  flowList.value = data;
};

const pluginList = ref([]);
const getUseablePluginList = async () => {
  const { data } = await listUseablePlugin({ data: {} });
  pluginList.value = data;
};

// 搜索
const handleSearch = () => {
  if (!searchWord.value) {
    filterList.value = DEFAULT_NODE_LIST;
    return;
  }
  const data = filterTree(
    DEFAULT_NODE_LIST,
    (item) => {
      if (item.label && item.label.includes(searchWord.value)) {
        return item;
      }
    },
    { children: 'nodes' }
  );
  filterList.value = data || [];
};
// 添加节点
const handleNodeClick = (node) => {
  if (node.type == 'flowcode') {
    getFlowList();
    showAddFlow.value = true;
    emit('hide');
    return;
  }
  if (node.type == 'plugincode') {
    getUseablePluginList();
    showAddPlugin.value = true;
    emit('hide');
    return;
  }
  emit('node-click', nodeObj[node.type]);
};


const onFlowSelect = (flow) => {
  showAddFlow.value = false;
  emit('node-click', nodeObj['flowcode'], flow.id);
};

const onPluginSelect = (plugin) => {
  showAddPlugin.value = false;
  emit('node-click', nodeObj['plugincode'], plugin.id, plugin);
};
</script>
<style lang="scss">
.panel-wrapper {
  width: 400px;
  height: 300px;
  background-color: #fff;
  border-radius: 8px;
}

.panel-node-list {
  height: 260px;
  overflow: auto;
}
.panel-node-item {
  margin: 10px 0;
  .title {
    font-weight: 600;
    font-size: 14px;
  }
}
.node-item-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  .node-item {
    flex-basis: 50%;
    font-size: 14px;
    display: flex;
    align-items: center;
    padding: 10px;
    padding-left: 0;
    cursor: pointer;
    &-icon {
      width: 20px;
      height: 20px;
      border-radius: 4px;
      margin-right: 6px;
    }
  }
}
</style>
